<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>个人中心-我的发布</title>
        <link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css">
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/sidebar-menu.css">
		<script src="js/jquery.min.js"></script>
		<script src="../../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/Chart.js/2.7.1/Chart.min.js"></script>
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<!-- <link href='http://fonts.useso.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> -->
		<!----//webfonts---->
		<!-- Global CSS for the page and tiles -->
  		<link rel="stylesheet" href="css/main.css">
  		<!-- //Global CSS for the page and tiles -->
		<!---start-click-drop-down-menu----->
		<script src="js/sidebar-menu.js"></script>
		<style type="text/css">
			.main-sidebar{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				min-height: 100%;
				width: 230px;
				z-index: 810;
				background-color: #222d32;
			 }
			 .current {
			 	color: #ff8900;
			 	font-weight: bold;
			 }
			 .blogtime {
			 	font-size: 10px; 
			 	float: right;
			 }
			 .product-chart {
			 	width: 249px;
			 	height: 249px;
			 	border-width: 1px;
			 	margin: 0 auto;
			 }
		</style>
        <!----start-dropdown--->
         <script type="text/javascript">
			var $ = jQuery.noConflict();
				$(function() {
					$('#activator').click(function(){
						$('#box').animate({'top':'0px'},500);
					});
					$('#boxclose').click(function(){
					$('#box').animate({'top':'-700px'},500);
					});
				});
				$(document).ready(function(){
				//Hide (Collapse) the toggle containers on load
				$(".toggle_container").hide(); 
				//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
				$(".trigger").click(function(){
					$(this).toggleClass("active").next().slideToggle("slow");
						return false; //Prevent the browser jump to the link anchor
				});
									
			});
		</script>
        <!----//End-dropdown--->
		<!---//End-click-drop-down-menu----->
	</head>
	<body>
		<!---start-wrap---->
			<!---start-header---->
			<div class="header">
				<div class="wrap">
				<div class="logo">
					<a href="index.html"><img src="images/steam_logo.jpg" title="steam" /></a>
				</div>
				<div class="nav-icon">
					 <a href="#" class="right_bt" id="activator"><span> </span> </a>
				</div>
				 <div class="box" id="box">
					 <div class="box_content">        					                         
						<div class="box_content_center">
						 	<div class="form_content">
								<div class="menu_box_list">
									<ul>
										<li><a href="index.html"><span>首页</span></a></li>
										<li><a href="#"><span>创作</span></a></li>
										<li><a href="#"><span>作品</span></a></li>
										<li><a href="#"><span>课程</span></a></li>
										<li><a href="#"><span>赛事</span></a></li>
										<li><a href="contact.html"><span>下载</span></a></li>
										<div class="clear"> </div>
									</ul>
								</div>
								<a class="boxclose" id="boxclose"> <span> </span></a>
							</div>                                  
						</div> 	
					</div> 
				</div>       	  
				<div class="top-searchbar">
					<h1 style="text-align: center;font-size: 200%;font-style:italic;">我的发布</h1>
				</div>
				<div class="userinfo">
					<div class="user">
						<ul>
							<li><a href="#"><img src="images/user-pic.png" title="user-name" /><span>张三</span></a></li>
						</ul>
					</div>
				</div>
				<div class="clear"> </div>
			</div>
		</div>
		<!---//End-header---->
		<!-- Start nav-bar -->
		<div class="content">
			<div class="row">
				<div class="col-md-3">
					<aside class="main-sidebar">
						<section  class="sidebar">
							<ul class="sidebar-menu">
							  <li class="header">导航栏</li>
							  <li class="treeview">
								<a href="#">
								  <i class="fa fa-dashboard"></i> <span>个人资料</span>
								</a>
							  </li>
							  <li class="treeview">
								<a href="#">
								  <i class="fa fa-files-o"></i>
								  <span>我的作品</span>
								  <span class="label label-primary pull-right">4</span>
								</a>
								<ul class="treeview-menu" style="display: none;">
								  <span class="label label-primary pull-right">1</span>
								  <li class="active"><a class="current" href="#"><i class="fa fa-circle-o"></i>我的发布</a></li>
								  <span class="label label-primary pull-right">2</span>
								  <li><a href="#"><i class="fa fa-circle-o"></i> 未发布</a></li>
								  <li><a href="#"><i class="fa fa-circle-o"></i> 搜藏分享</a></li>
								  <span class="label label-primary pull-right">1</span>
								  <li class=""><a href="#"><i class="fa fa-circle-o"></i> 我的作业</a>
								  </li>
								</ul>
							  </li>
							  <li class="treeview">
								<a href="#">
								  <i class="fa fa-laptop"></i>
								  <span>我的班级</span>
								  <i class="fa fa-angle-left pull-right"></i>
								</a>
								<ul class="treeview-menu">
								  <li><a href="#"><i class="fa fa-circle-o"></i> 班级资料</a></li>
								  <li><a href="#"><i class="fa fa-circle-o"></i> 班级项目</a></li>
								</ul>
							  </li>
							  <li class="treeview">
								<a href="#">
								  <i class="fa fa-edit"></i> <span>我的小组</span>
								  <i class="fa fa-angle-left pull-right"></i>
								</a>
								<ul class="treeview-menu">
								  <li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>
								  <li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
								  <li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>
								</ul>
							  </li>
							  <li class="treeview">
								<a href="#">
								  <i class="fa fa-table"></i> <span>班级作业</span>
								  <i class="fa fa-angle-left pull-right"></i>
								</a>
								<ul class="treeview-menu">
								  <li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>
								  <li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>
								</ul>
							  </li>
							  <li>
								<a href="#">
								  <i class="fa fa-calendar"></i> <span>Calendar</span>
								  <small class="label pull-right label-danger">3</small>
								</a>
							  </li>
						</section>
					</aside>
					<script>
						$.sidebarMenu($('.sidebar-menu'))
					</script>
				</div>
				<div class="col-md-9" style="margin-top: 95px;">
					<div class="row">
						<div class="col-md-6">
							<div class="panel panel-default">
                                <div class="panel-thumbnail"><img src="images/blog-icon2.png" class="img-responsive"></div>
                                <div class="panel-body">
                                  <p class="lead">发布作品</p>
                                  <p>45 已发布, 13 未发布</p> 
                                  	<div class="product-chart">
                                  		<canvas id="myPieChart" width="50" height="50"></canvas>
                                  	</div>                                	
                                    <script>
                                    	var ctx = document.getElementById('myPieChart');
									    var myPieChart = new Chart(ctx,{
										    type: 'pie',
										    data: data = {
											    datasets: [{
											    	label:'作品发布情况',
											        data: [13, 45],
											        backgroundColor: [
										                'rgba(255, 99, 132, 0.2)',
										                'rgba(54, 162, 235, 0.2)',
										            ]
											    }],

											    // These labels appear in the legend and in the tooltips when hovering different arcs
											    labels: [
											        '未发布',
											        '已发布'
											    ]
											}
										});
									</script>                                
                                </div>
                              </div>

                              <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="pull-right">查看其它作品</a> <h4>最近发表作品</h4></div>
                                  <div class="panel-body">
                                    <div class="list-group">
                                      <a href="#tagged/modal" class="list-group-item">如何自制潜水小车 <small class="blogtime">2018-05-08 16:24</small></a>
                                      <a href="#tagged/datetime" class="list-group-item">超级玛丽编码 <small class="blogtime" ">2018-05-01 14:33</small></a>
                                      <a href="#tagged/datatable" class="list-group-item">爱吃的兔兔 <small class="blogtime">2018-04-18 20:22</small></a>
                                      <a href="">...</a>
                                    </div>
                                  </div>
                              </div>

                              <div class="panel panel-default">
                                 <div class="panel-heading"><a href="#" class="pull-right">查看</a> <h4>上次保存草稿</h4></div>
                                  <div class="panel-body">
                                    <img src="images/img1.jpg" class="img-circle pull-right"> <button class="btn btn-primary">发布作品</button>
                                    <div class="clearfix"></div>
                                    作品说明： <small>这个内容部分显示上次未完成的作品的说明部分，即该作品的目的、功能，未完成的部分以及下次即将提交的内容，主要为这些内容...</small>
                                    <hr>
                                    <ul class="list-unstyled"><li><a href="#/templates">>>继续编辑作品</a></li><li><a href="#/templates">查看全部未发布作品</a></li><li><a href="#/templates">分享作品 &#10086</a></li></ul>
                                  </div>
                              </div>
                           
                              <div class="panel panel-default">
                                <div class="panel-heading"><h4>我的作品使用简介</h4></div>
                               	<div class="panel-body">
                                	<p>1.发布的作品可以通过已发布部分进行查看</p>
                                	<p>2.未发布的作品可以发布或者继续编辑，可以查看所有未发布的作品</p>
                                	<p>3.可以看到发布于未发布的作品统计</p>
                                	<p>4.可以看到自己的作品的评分与被浏览情况</p>
                                	<p>...</p>
                                </div>
                              </div>                          
						</div>
						<div class="col-md-4">
							<div class="well"> 
                                   <form class="form">
                                    <h4>搜索</h4>
                                    <div class="input-group text-center">
                                    <input type="text" class="form-control input-lg" placeholder="请输入查找内容">
                                      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
                                    </div>
                                  </form>
                            </div>

                            <div class="panel panel-default">
                                 <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>最受欢迎的作品</h4></div>
                                  <div class="panel-body">
                                    <p><img src="images/img2.jpg" class="img-thumbnail pull-right" style="width: 150px; height: 150px;"> <a href="#">爱吃的兔兔</a></p>
                                    <div class="clearfix"></div>
                                    <hr>
                                    这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字这里是一大波介绍文字...
                                  </div>
                               </div>
                            
                               <div class="panel panel-default">
                                 <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>栈溢出官网</h4></div>
                                  <div class="panel-body">
                                    <img src="../img/test.jpg" class="img-circle pull-right" style="width: 150px; height: 150px;"> <a href="#">Keyword: Bootstrap</a>
                                    <div class="clearfix"></div>
                                    <hr>
                                    
                                    <p>If you're looking for help with Bootstrap code, the <code>twitter-bootstrap</code> tag at <a href="#/questions/tagged/twitter-bootstrap">Stackoverflow</a> is a good place to find answers.</p>
                                    
                                    <hr>
                                    <form>
                                    <div class="input-group">
                                      <div class="input-group-btn">
                                      <button class="btn btn-default">+1</button><button class="btn btn-default"><i class="glyphicon glyphicon-share"></i></button>
                                      </div>
                                      <input type="text" class="form-control" placeholder="Add a comment..">
                                    </div>
                                    </form>
                                    
                                  </div>
                               </div>
                            
                               <div class="panel panel-default">
                                <div class="panel-thumbnail"><img src="images/fax.png" class="img-responsive"></div>
                                <div class="panel-body">
                                  <p class="lead">我的社交</p>
                                  <p>1,200 个粉丝, 83 次提交</p>
                                  
                                  <p>
                                    <img src="https://lh6.googleusercontent.com/-5cTTMHjjnzs/AAAAAAAAAAI/AAAAAAAAAFk/vgza68M4p2s/s28-c-k-no/photo.jpg" width="28px" height="28px">
                                    <img src="https://lh4.googleusercontent.com/-6aFMDiaLg5M/AAAAAAAAAAI/AAAAAAAABdM/XjnG8z60Ug0/s28-c-k-no/photo.jpg" width="28px" height="28px">
                                    <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
                                  </p>
                                </div>
                              </div>
						</div>
					</div>
				</div>
			</div>
		
		</div>
		  <script src="js/jquery.imagesloaded.js"></script>
		  <script src="js/jquery.wookmark.js"></script>
		  <script type="text/javascript">
		    (function ($){
		      var $tiles = $('#tiles'),
		          $handler = $('li', $tiles),
		          $main = $('#main'),
		          $window = $(window),
		          $document = $(document),
		          options = {
		            autoResize: true, // This will auto-update the layout when the browser window is resized.
		            container: $main, // Optional, used for some extra CSS styling
		            offset: 10, // Optional, the distance between grid items
		            itemWidth:280 // Optional, the width of a grid item
		          };
		      /**
		       * Reinitializes the wookmark handler after all images have loaded
		       */
		      function applyLayout() {
		        $tiles.imagesLoaded(function() {
		          // Destroy the old handler
		          if ($handler.wookmarkInstance) {
		            $handler.wookmarkInstance.clear();
		          }
		
		          // Create a new layout handler.
		          $handler = $('li', $tiles);
		          $handler.wookmark(options);
		        });
		      }
		      /**
		       * When scrolled all the way to the bottom, add more tiles
		       */
		      function onScroll() {
		        // Check if we're within 100 pixels of the bottom edge of the broser window.
		        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
		            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
		
		        if (closeToBottom) {
		          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
		          var $items = $('li', $tiles),
		              $firstTen = $items.slice(0, 10);
		          $tiles.append($firstTen.clone());
		
		          applyLayout();
		        }
		      };
		
		      // Call the layout function for the first time
		      applyLayout();
		
		      // Capture scroll event.
		      $window.bind('scroll.wookmark', onScroll);
		    })(jQuery);

		    $(document).ready(function(){  

			    $(".nav a").each(function(){  

			        $(this).click(function(){  

			            $(".nav .hover").removeClass("hover");  

			            $(this).addClass("hover");    

			            return false;//防止页面跳转  

			        });  

			    });  

			});  
		  </script>
		<!----//wookmark-scripts---->
		<!----start-footer--->
		<div class="footer">
			<p>Copyright &copy; 2015.Company name All rights reserved.</p>
		</div>
		<!----//End-footer--->
		<!---//End-wrap---->
	</body>
</html>

